<template>
  <transition name="msgbox-fade">
    <div class="confirm-wrapper" v-show="visible">
      <div class="confirm">
        <div class="confirm-body">
          <div class="confirm-tip" v-if="tip">
            <i class="iconfont" :class="iconName" v-if="btn.type"></i>{{tip}}
          </div>
          <div class="confirm-msg" v-if="msg" :class="{ 'has-type': btn.type && tip }" v-html="msg"></div>
        </div>
        <div class="confirm-footer">
          <mine-button @click="cancel" secondary v-if="btn.cancelButtonText">{{btn.cancelButtonText}}</mine-button>
          <mine-button @click="submit" type="primary" v-if="btn.confirmButtonText">{{btn.confirmButtonText}}</mine-button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    computed: {
      iconName () {
        if (this.btn && this.btn.type === 'success') return 'icon-check-circle-line is-primary';
        if (this.btn && this.btn.type === 'info') return 'icon-info-circle-line is-info';
        if (this.btn && this.btn.type === 'warning') return 'icon-warning-circle-line is-warning';
        if (this.btn && this.btn.type === 'error') return 'icon-close-circle-line is-danger';
        return '';
      }
    },
    data () {
      return {
        visible: false,
        msg: '',
        tip: '',
        btn: {
          type: '', // success, info, warning, error
          confirmButtonText: '',
          cancelButtonText: ''
        },
        loading: false,
      }
    },
    methods: {
      cancel () {},
      submit () {},
      throttle () {
        return
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '~@/style/variables.less';
  .confirm-wrapper {
    background: rgba(0,0,0,0.45);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .confirm {
    width: 400px;
    background-color: @--color-white;
    border-radius: 4px;
    padding: 24px 32px;
    box-sizing: border-box;
  }
  .confirm-tip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: @--color-text-primary;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    .iconfont {
      font-size: 24px;
      margin-right: 8px;
      &.is-success {
        color: @--color-success;
      }
      &.is-warning {
        color: @--color-warning;
      }
      &.is-info {
        color: @--color-info;
      }
      &.is-danger {
        color: @--color-danger;
      }
    }
  }
  .confirm-msg {
    font-size: 14px;
    line-height: 22px;
    color: @--color-text-regular;
    margin-bottom: 24px;
    word-break : break-all;
    &.has-type {
      margin-left: 32px;
    }
  }
  .confirm-footer {
    text-align: right;
  }
</style>
